<template>
  <div v-loading="loading">
      <div class="content-top">
          <span class="h1">项目管理</span>
          <span class="h2">项目管理员</span>
          <el-button type="primary"  @click="fnAddTip()">添加项目管理员</el-button>
      </div>
      <div class="content">
          <div class="title clearfix">
            <div class="fl">
                <label for="">工程项目:</label>
                <el-select v-model="proValue" placeholder="请选择" filterable @change="changePro()">
                  <el-option
                  v-for="item in options"
                  :key="item.ID"
                  :label="item.Name"
                  :value="item.ID">
                  </el-option>
                </el-select>
              <label for="">行政区域:</label>
              <el-cascader :options="regions" v-model="region" separator='-' change-on-select filterable clearable></el-cascader>
              <label for="">用户类型:</label>
              <el-select v-model="type" placeholder="请选择用户类型" clearable>
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              
            </div>
            <div class="fr" >
                <el-input v-model="search" placeholder="请输入电话号码或身份证" style="width:217px;"></el-input>
                <el-button type="primary" @click="fnSearch">查询</el-button>
            </div>
          </div>
          
          <el-table :data="userData" border style="width: 100%;">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="Login"  label="用户名">
            </el-table-column>
            <el-table-column prop="CNName" label="姓名">
            </el-table-column>
            <el-table-column prop="Tel" label="电话">
            </el-table-column>
            <el-table-column prop="UserTypeStr" label="账户类型">
            </el-table-column>
            <el-table-column prop="RegionStr" label="行政区域" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="StateStr" label="状态">
            </el-table-column>
            <el-table-column  label="操作">
						<template slot-scope="scope">
							<el-dropdown  trigger="click">
                  <el-button type="primary">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item><el-button type="success" size="small" @click="fnEditTip(scope.row.ID,scope.row.CNName,scope.row.Tel,scope.row.UserType,scope.row.RegionID,scope.row.ProjectID,scope.row.OtherView,scope.row.OtherEdit,scope.row.SpecialAuth)">修改</el-button></el-dropdown-item>
                      <el-dropdown-item><el-button type="danger"  size="small" @click="userDel(scope.row.ID)">删除</el-button></el-dropdown-item>
                      <el-dropdown-item v-if="scope.row.State==2"><el-button type="warning" size="small" @click="fnClose(scope.row.ID)">关闭</el-button></el-dropdown-item>
                      <el-dropdown-item v-if="scope.row.State==3"><el-button type="warning" size="small" @click="fnClose(scope.row.ID)">开启</el-button></el-dropdown-item>
                      <el-dropdown-item  v-if="scope.row.State==1"><el-button type="info"  size="small" @click="userss(scope.row.ID)">审核通过</el-button></el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
						</template>
					</el-table-column>
        </el-table>
        <div class="pages">
          <el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
          </el-pagination>
        </div>
      </div>
      <!-- 添加 -->
    <div class="add">
        <el-dialog
        title="添加项目管理员"
        :visible.sync="addTip"
        width="500px">
        <div class="adduserinfo">
            <el-form ref="form"  label-width="100px">
                <el-form-item label="用户名：">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="验证密码：">
                    <el-input  type="password" v-model="user.yzma"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名：">
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label="用户电话：">
                    <el-input v-model="user.tel"></el-input>
                </el-form-item>
                <el-form-item label="工程项目：">
                  <el-select v-model="user.gcxm" placeholder="请选择工程项目" filterable @change="changePro1">
                    <el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="行政区域：">
                  <el-cascader :options="regions" v-model="user.region" separator='-' change-on-select filterable  placeholder="请选择行政区域"></el-cascader>
                </el-form-item>
                <el-form-item label="用户类型：">
                  <el-select v-model="user.type" placeholder="请选择用户类型">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                
                <!-- <el-form-item label="上传头像">
                    <el-upload class="avatar-uploader" :action="fileApi" :show-file-list="false" :on-success="HoldSuccess" :on-error="onError" :before-upload="beforeAvatarUpload">
                        <img v-if="cardHold" :src="Host+cardHold" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
                
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addTip = false">取 消</el-button>
            <el-button type="primary" @click="subAdd()">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
        title="修改项目管理员"
        :visible.sync="editTip"
        width="500px">
        <div class="adduserinfo">
            <el-form ref="user"  label-width="100px">
                <el-form-item label="用户姓名：">
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label="用户电话：">
                    <el-input v-model="user.tel"></el-input>
                </el-form-item>
                <el-form-item label="工程项目：">
                  <el-select v-model="user.gcxm" placeholder="请选择工程项目" filterable @change="changePro2">
                    <el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="行政区域：">
                  <el-cascader :options="regions" v-model="user.region" separator='-' change-on-select filterable  placeholder="请选择行政区域"></el-cascader>
                </el-form-item>
                <el-form-item label="用户类型：">
                  <el-select v-model="user.type" placeholder="请选择用户类型">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="查看他人数据" v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
                  <el-checkbox v-model="user.checked"></el-checkbox>
                </el-form-item>
                <el-form-item label="修改他人数据" v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
                  <el-checkbox v-model="user.checked1"></el-checkbox>
                </el-form-item>
                <el-form-item label="特殊权限" v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
                  <el-checkbox v-model="user.checked2"></el-checkbox>
                </el-form-item>
                
                <!-- <el-form-item label="上传头像">
                    <el-upload class="avatar-uploader" :action="fileApi" :show-file-list="false" :on-success="HoldSuccess" :on-error="onError" :before-upload="beforeAvatarUpload">
                        <img v-if="cardHold" :src="Host+cardHold" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
                
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editTip = false">取 消</el-button>
            <el-button type="primary" @click="subEdit()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "projectUser",
  data() {
    return {
      loading:false,
      pages: 1, //分页页码
      total: 1, //条数
      search: "", //搜索
      fileApi: "",
      addTip: false,
      editTip: false,
      projectShow:'',
      cardHold: "",
      cardHoldUrl: "",
      
      user: {
        id: "",
        username: "",
        password: "",
        yzma: "",
        name: "",
        tel: "",
        gcxm: "",
        type: 1,
        region: [],
        checked:true,//查看他人
        checked1:false,//修改他人
        checked2:false,//特殊权限
      },
      userData: [],
      options: [],
      proValue: "", //当前选择项目值
      regions: [], //当前选择区域值
      type: '', //账号类型
      region: [],
      typeList: [
        {
          value: 1,
          label: "管理员"
        },
        {
          value: 2,
          label: "镇征拆"
        },
        {
          value: 3,
          label: "镇财务"
        },
        {
          value: 4,
          label: "县征拆"
        },
        {
          value: 5,
          label: "县财务"
        },
        {
          value: 6,
          label: "业主征拆"
        },
        {
          value: 7,
          label: "业主财务"
        },
        {
          value: 8,
          label: "领导通道"
        }
      ] //用户类型
    };
  },
  mounted() {
    this.projectShow=sessionStorage.ProjectID;
    this.getlistde();
    
  },
  methods: {
    //搜索
    fnSearch() {
      this.pages = 1;
      this.getlist(this.pages,this.proValue,this.region[this.region.length - 1],this.search,this.type);
    },
    //当项目改变的时候重新拉取行政区域
    changePro(){
      this.region=[];
      this.anonymousget(this.proValue)
    },
    changePro1(){
      this.anonymousget(this.user.gcxm)
    },
    changePro2(){
      this.anonymousget(this.user.gcxm)
    },
    //分页
    handleCurrentChange(val) {
      this.getlist(val,this.proValue,this.region[this.region.length - 1],this.search,this.type);
    },
    //获取项目
    getlistde() {
      this.$post(api.getlistde).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.options = response.Data;
          this.proValue = this.options[0] ? this.options[0].ID : "";
          this.user.gcxm = this.options[0] ? this.options[0].ID : "";
          this.anonymousget(this.proValue);
          this.getlist(this.pages,this.proValue,0,'',0);
        }else{
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //获取行政区域
    anonymousget(val) {
      this.regions=[];
      this.user.region=[];
      if(!val){
        return false;
      }
      this.$get(api.anonymousget + "/" + val).then(response => {
        if (response.data.isOK == true && response.data.state == 200) {
          for (var i = 0; i < response.data.Data.length; i++) {
            this.regions.push({
              label: response.data.Data[i].RegionName,
              value: response.data.Data[i].ID,
              ParentID: response.data.Data[i].ParentID
            });
          }
          this.regions = this.$toTree(this.regions);
          this.user.region.push(this.regions[0].value);
          this.region.push(this.regions[0].value);
        }else{
          this.$message.error(response.data.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //获取操作员列表
    getlist(index,proid,regid,val,type) {
      this.loading=true;
      this.$post(api.getlist, {
        Para: {
          ProjectID: proid,
          RegionID: regid,
          QueryKeyWord: val,
          UserType: type
        },
        PageSize: 10,
        PageIndex: index - 1,
        OrderString: "",
        ToExcel: false
      }).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.loading=false;
          this.userData = response.Data.Data;
          this.total = response.Data.Items ? response.Data.Items : 1;
        }else{
          this.loading=false;
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })

    },
    //修改弹窗
    fnEditTip(id, name, tel, type, regid, proid,OtherView,OterEdit,SpecialAuth) {
      this.editTip = true;
      this.user.id = id;
      this.user.name = name;
      this.user.tel = tel;
      this.user.type = type;
      this.user.gcxm = proid;
      this.user.checked = OtherView
      this.user.checked1 = OterEdit
      this.user.checked2 = SpecialAuth
      this.anonymousget(proid)
      // this.user.region= []
      this.anonychildby(regid)
//    this.userusern=
    },
    
    //通过指定id获取区域数据
		anonychildby(id){
			this.user.region= []
			this.$get(api.anonychildby + '/' + id).then((response) => {
				if(response.data.isOK == true && response.data.state ==200){
					if(!response.data.Data){
						this.user.region.push(id)
						return false
					}
					for(let i = response.data.Data.length-1;i>=0;i--){
						this.user.region.push(response.data.Data[i].ID)
					}
					this.user.region.push(id)
				}else{
          // this.$message.error(response.data.msg);
        }
				
			})
		},
    
    //确认修改
    subEdit() {
      if (
        this.user.name == "" ||
        this.user.tel == ""
      ) {
        this.$message.error("不能为空");
        return;
      }
      if(this.user.region.length<=0){
        this.$message.error("请选择行政区域");
        return false;
      }
      this.loading=true;
      this.editTip = false;
      this.$post(api.updatett, {
        ID: this.user.id,
        RegionID: this.user.region[this.user.region.length-1],
        ProjectID: this.user.gcxm,
        UserType: this.user.type,
        CNName: this.user.name,
        Tel: this.user.tel,
        OtherView: this.user.checked,
        OterEdit: this.user.checked1,
        SpecialAuth:this.user.checked2
      }).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.loading=false;
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          this.getlist(1,'',0,'',0);
        }else{
          this.loading=false;
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
      this.user.id = '';
      this.user.name = '';
      this.user.tel = '';
      this.user.gcxm = '';
    },
    //打开添加弹窗
    fnAddTip() {
      this.addTip = true;
      this.user.username = "";
      this.user.password = "";
      this.user.yzma = "";
      this.user.name = "";
      this.user.tel = "";
       this.anonymousget(this.user.gcxm)
    },
    //提交添加
    subAdd() {
      this.addTip = false;
      if (
        this.user.username == "" ||
        this.user.password == "" ||
        this.user.name == "" ||
        this.user.tel == ""
      ) {
        this.$message.error("不能为空");
        return;
      }
      if (this.user.password !== this.user.yzma) {
        this.$message.error("两次密码不一样");
        return;
      }
      this.loading=true;
      this.$post(api.add, {
        Login: this.user.username,
        CNName: this.user.name,
        HeadIMG: "",
        Pwd: this.$md5(this.user.password),
        Tel: this.user.tel,
        ProjectID: this.user.gcxm,
        RegionID: this.user.region[this.user.region.length - 1],
        UserType: this.user.type,
        State: "1"
      }).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.loading=false;
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.getlist(1,'',0,'',0);
        }else{
          this.loading=false;
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //删除用户
    userDel(id) {
      this.$confirm("将永久删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading=true;
          this.$get(api.deluser + "/" + id).then(response => {
            if (response.data.isOK == true && response.data.state == 200) {
              this.loading=false;
              this.getlist(1,'',0,'',0);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.loading=false;
              this.$message.error(response.data.msg);
            }
          }).catch((error)=>{
            this.loading=false;
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //关闭
    fnClose(id){
      this.loading=true;
      this.$get(api.closes + "/" + id).then(response => {
            if (response.data.isOK == true && response.data.state == 200) {
              this.loading=false;
              this.getlist(1,'',0,'',0);
            } else {
              this.loading=false;
              this.$message.error(response.data.msg);
            }
          }).catch((error)=>{
            this.loading=false;
          })
    },
    //用户审核
    userss(id){
      this.$get(api.userss + "/" + id).then(response => {
            if (response.data.isOK == true && response.data.state == 200) {
              this.loading=false;
              this.getlist(1,'',0,'',0);
            } else {
              this.loading=false;
              this.$message.error(response.data.msg);
            }
          }).catch((error)=>{
            this.loading=false;
          })
    },
    //上传头像
    HoldSuccess(res, file) {
      this.loading = false;
      this.cardHoldUrl = res.data.filePaht.substring(
        2,
        res.data.filePaht.length
      );
      this.cardHold = res.data.filePaht.substring(2, res.data.filePaht.length);
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    //上传失败
    onError() {
      this.loading = false;
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      this.loading = true;
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/bmp";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG,PNG,BMP,JPEG 格式!");
        this.loading = false;
      }
      return isJPG;
    }
  }
};
</script>
<style scoped>
.content .select {
  width: 100%;
  margin-bottom: 10px;
}
.content .select label {
  display: inline-block;
  width: 80px;
  line-height: 40px;
}
.title {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.title-ser{
  width: 49%;
  display: inline-block;
  line-height: 40px;
}
.adduserinfo {
  width: 100%;
}
.adduserinfo .el-cascader{
		width: 100%!important;
	}
  .adduserinfo .el-select{
    width: 100%!important;
  }
</style>


